/* eslint-disable no-unused-vars */
<template>
  <el-row class="home" :gutter="20">
    <el-col :span="8">
      <el-card shadow="hover" class="card">
        <div class="user">
          <img :src="userImg" alt="" />
          <div class="userInfo">
            <p class="name">Nick</p>
            <p class="access">超级管理员</p>
          </div>
        </div>
        <div class="loginInfo">
          <p>上次登陆时间：<span>2020-3-23</span></p>
          <p>上次登陆地点：<span>北京</span></p>
        </div>
      </el-card>
      <el-card shadow="hover" class="card" style="height: 522px;" :body-style="{ padding: 0 }">
        <el-table :data="tableData" :row-class-name="tableRowClassName">
          <el-table-column align="center" show-overflow-tooltip v-for="(item, index) of tableLabel" :key="index" :prop="index" :label="item"></el-table-column>
        </el-table>
      </el-card>
    </el-col>
    <el-col :span="16">
      <section class="numList">
        <el-card shadow="hover" class="card card_list" v-for="(item, index) of countData" :key="index" :body-style="{ width: '100%', padding: 0 }">
          <div class="el-card-box">
            <i class="icon" :class="`el-icon-${item.icon}`" :style="{ background: item.color }"></i>
            <div class="detail">
              <p class="num">￥{{ item.value }}</p>
              <p class="txt">{{ item.name }}</p>
            </div>
          </div>
        </el-card>
      </section>
      <el-card shadow="hover" class="card">
        <home-echart style="height: 280px" :chartData="echartData.order" :isAxisChart="true" />
      </el-card>
      <section class="graph">
        <el-card shadow="hover" class="card">
          <home-echart style="height: 260px" :chartData="echartData.user" :isAxisChart="true" />
        </el-card>
        <el-card shadow="hover" class="card">
          <home-echart style="height: 260px" :chartData="echartData.video" :isAxisChart="false" />
        </el-card>
      </section>
    </el-col>
  </el-row>
</template>

<script>
import HomeEchart from '../../common/Echart'
// import Vue from 'vue'
export default {
  name: 'Home',
  components: {
    HomeEchart
  },
  data() {
    return {
      userImg: require('../../../assets/images/im1.png'),
      countData: [
        {
          name: '今日支付订单',
          value: 1234,
          icon: 'success',
          color: '#2ec7c9'
        },
        {
          name: '今日收藏订单',
          value: 210,
          icon: 'star-on',
          color: '#ffb980'
        },
        {
          name: '今日未支付订单',
          value: 1234,
          icon: 's-goods',
          color: '#5ab1ef'
        },
        {
          name: '本月支付订单',
          value: 1234,
          icon: 'success',
          color: '#2ec7c9'
        },
        {
          name: '本月收藏订单',
          value: 210,
          icon: 'star-on',
          color: '#ffb980'
        },
        {
          name: '本月未支付订单',
          value: 1234,
          icon: 's-goods',
          color: '#5ab1ef'
        }
      ],
      tableLabel: {
        // 表格表头名字
        name: '课程名',
        todayBuy: '今日购买',
        monthBuy: '本月购买',
        totalBuy: '总购买'
      },
      tableData: [], // 表格内容
      echartData: {
        order: {
          xData: [], // x轴数据
          series: []
        },
        user: {
          xData: [], // x轴数据
          series: []
        },
        video: {
          series: []
        }
      }
    }
  },
  created() {
    this.getHomeData()
  },
  methods: {
    async getHomeData() {
      const data = await this.http.get('/home/getData')
      console.log(data)
      const dataTotal = data.data.data
      //表格数据
      this.tableData = dataTotal.tableData
      //折线图图表数据
      const order = dataTotal.orderData
      this.echartData.order.xData = order.date
      // 取出series中name --- 键名 用Object.keys()方法
      let nameOrderArray = Object.keys(order.data[0])
      nameOrderArray.forEach(key => {
        this.echartData.order.series.push({
          name: key === 'wechat' ? '小程序' : key, // 前端把英文转换成汉字
          data: order.data.map(item => item[key]), // map循环返回值，返回其键名下的值，返回一个新数组
          type: 'line'
        })
      })
      // 柱状图图表数据
      const user = dataTotal.userData
      let nameUserArray = user.map(item => item.date)
      this.echartData.user.xData = nameUserArray
      this.echartData.user.series.push({
        name: '新增用户',
        data: user.map(item => item.new), // map循环返回值，返回其键名下的值，返回一个新数组
        type: 'bar'
      }),
        this.echartData.user.series.push({
          name: '活跃用户',
          data: user.map(item => item.active), // map循环返回值，返回其键名下的值，返回一个新数组
          type: 'bar',
          barGap: 0 // 柱形图之间距离，barGap必须放在最后一项，要不然会被其他的bar共享
        }),
        // 饼状图图表数据
        console.log(dataTotal.videoData)
      // 这是分列式的圆形图表展现方式
      // dataTotal.videoData.forEach(function(res) {
      //   //循环向 a里面的每一个数据添加一个名为aa值为0的新属性
      //   Vue.set(res, 'selected', true)
      // })
      this.echartData.video.series.push({
        type: 'pie',
        data: dataTotal.videoData
      })
    },
    // 表格添加背景色
    // eslint-disable-next-line no-unused-vars
    tableRowClassName({ row, rowIndex }) {
      // console.log(row + rowIndex)
      if (rowIndex % 2 == 1) {
        return 'warning-row'
      } else {
        return 'success-row'
      }
    }
  }
}
</script>

<style lang="stylus" scope>
// ~ : 代表相对路径 不加会报错
@import '~@/assets/css/home.styl'
// stylus穿透修改css: >>> ; scss穿透用：
.warning-row {
  background: oldlace!important;
}

.success-row {
  background: #f0f9eb!important;
  animation: bgflash 1s infinite; // 字体闪烁
}
@keyframes bgflash {
  50% {color: #f56c6c;}
}
</style>
